import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./MyComponent'));

function App() {
 return (
 Loading...

Tässä esimerkissä:

• React.lazy-funktiota käytetään MyComponent-komponentin laiskasti lataamiseen.
• Suspense ympäröi LazyComponent-komponentin.
• fallback-ominaisuus tarjoaa varalla olevan käyttöliittymän (latausindikaattorin), joka näytetään, kun MyComponent-komponentti latautuu.

Virherajojen toteuttaminen

Vaikka Suspense käsittelee lataustiloja, Virherajat ovat React-komponentteja, jotka sieppaavat JavaScript-virheitä missä tahansa alikomponenttipuussa, kirjaavat nämä virheet ja näyttävät varalla olevan käyttöliittymän sen sijaan, että koko komponenttipuu kaatuisi.

Miten Virherajat toimivat

Virherajat ovat luokkakomponentteja, jotka määrittävät seuraavat elinkaarimetodit:

• static getDerivedStateFromError(error): Tätä metodia kutsutaan sen jälkeen, kun jälkeläiskomponentti on heittänyt virheen. Se vastaanottaa heitetyn virheen argumenttina ja sen pitäisi palauttaa arvo tilan päivittämiseksi.
• componentDidCatch(error, info): Tätä metodia kutsutaan sen jälkeen, kun jälkeläiskomponentti on heittänyt virheen. Se vastaanottaa virheen ja info-objektin, joka sisältää tietoja siitä, mikä komponentti heitti virheen. Tämä on ihanteellinen paikka kirjata virhe palveluun, kuten Sentry tai Bugsnag.

Tärkeää: Virherajat sieppaavat vain virheitä komponenteissa, jotka ovat niitä alempana puussa. Virheraja ei voi siepata virhettä itsessään.

Esimerkki: Perus Virheraja-toteutus

            
import React, { Component } from 'react';

class ErrorBoundary extends Component {
 constructor(props) {
 super(props);
 this.state = {
 hasError: false
 };
 }

 static getDerivedStateFromError(error) {
 // Päivitä tila, jotta seuraava renderöinti näyttää varalla olevan käyttöliittymän.
 return {
 hasError: true
 };
 }

 componentDidCatch(error, info) {
 // Voit myös kirjata virheen virheraportointipalveluun
 console.error('Siepattu virhe: ', error, info);
 }

 render() {
 if (this.state.hasError) {
 // Voit renderöidä minkä tahansa mukautetun varalla olevan käyttöliittymän
 return 
Jotain meni pieleen.
;
 }

 return this.props.children; 
 }
}

export default ErrorBoundary;

            

              
                Copy
              
            
          

Käytä Virherajaa ympäröimään mikä tahansa komponentti, joka saattaa heittää virheen:

            
import React from 'react';
import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';

function App() {
 return (
 
 
 
 );
}

export default App;

            

              
                Copy
              
            
          

Suspensen ja Virherajojen integrointi

Todellinen teho tulee Suspensen ja Virherajojen yhdistämisestä. Tämän avulla voit käsitellä sekä lataustiloja että virheitä tyylikkäästi sovelluksessasi. Suositeltava käytäntö on ympäröidä Suspense Virherajalla. Tällä tavalla, jos laiskasti ladattava komponentti ei lataudu (esim. verkkovirhe), Virheraja voi siepata virheen ja näyttää hyödyllisen viestin käyttäjälle.

Esimerkki: Suspensen ja Virherajojen yhdistäminen

            
import React, { Suspense } from 'react';
import ErrorBoundary from './ErrorBoundary';

const LazyComponent = React.lazy(() => import('./MyComponent'));

function App() {
 return (
 
 Loading...